<script lang='ts' setup>
import { ElNotification } from 'element-plus'
import { reactive, ref, onMounted } from 'vue'
import UserGroupRoleApi from '/@/api/org/bean/user-group-role'
import UserDeptApi from '/@/api/org/bean/user-dept'
import { deletePageTableSelectionDataList } from '/@/utils/api-service'
import { jumpPath } from '/@/utils/router-kit'
import UnitTreeDialog from '/@/views/org/unit/component/unit-tree-dialog.vue'
import UserSelectDialog from '/@/views/org/user/component/user-list-select-dialog.vue'
import { UserEditUrl } from '/@/views/org/mapping.json'
const RoleUnitUserTableRef = ref()

const props = defineProps({
    /** 作业id */
    roleId: String,
})

const RoleUnitUserState = reactive({
    // ////////////////////搜索部分/////////////////////////////////////////
    queryForm: { roleId: props.roleId },
    ///////////////////////表格部分//////////////////////////////////////
    /**
     * 表格选中的数据
     */
    selectionData: [] as any[],
    /**
     * 表格的列配置
     */
    tableColumn: [
        { label: '序号', width: '50', type: 'selection' },
        { label: '序号', width: '50', type: 'index' },
        { label: '部门', width: '400', prop: 'unitName', type: 'string' },
        {
            label: '用户', prop: 'userFullName', type: 'link',
            linkClick: (row: any) => {
                UserDeptApi.queryById(row.userGroupId).then((res: any) => {
                    jumpPath(UserEditUrl + res.data.userId)
                })
            }
        },
        { label: '是否有效', width: '100', prop: 'valid', slot: "customValid" },
    ],
    /**
     * 表格数据加载的方法
     */
    loadData: (params: any) => UserGroupRoleApi.queryPage(null, { ...params, ...RoleUnitUserState.queryForm }),
    /** 表格数据导出 */
    expData: (params: any) => UserGroupRoleApi.exportData(null, { ...params, ...RoleUnitUserState.queryForm }),
    /**
     * 表格选中事件
     */
    tableSelectionChange: (dataList: any[], pkList: string[]) => {
        RoleUnitUserState.selectionData = dataList
    },
    /**
     * 表格删除事件
     */
    deleteTableData: () => {
        //删除表格数据提供两种不同的api 一个是整行数据数组删除 一个是取行主键id数组删除
        deletePageTableSelectionDataList(RoleUnitUserTableRef, UserGroupRoleApi)
    },
    /**
     * 添加部门按钮点击事件
     */
    onAddUnitButtonClick: () => {
        RoleUnitUserState.unitDialogVisible = true
    },
    /**
     * 添加用户按钮点击事件
     */
    onAddUserButtonClick: () => {
        RoleUnitUserState.userDialogVisible = true
    },

    ////// 弹窗 start ////////
    unitDialogVisible: false,
    userDialogVisible: false,
    updateUnitDialogVisible: (val: boolean) => {
        RoleUnitUserState.unitDialogVisible = val
    },
    updateUserDialogVisible: (val: boolean) => {
        RoleUnitUserState.userDialogVisible = val
    },

    // 保存部门回调函数
    onSaveUnit: (data: any) => {
        let params: { roleId: string | undefined; userGroupId: any; userGroupType: any }[] = []
        data.forEach((element: any) => {
            let item = {
                roleId: props.roleId,
                userGroupId: element.attributes.unitId,
                userGroupType: 2
            }
            params.push(item)
        });
        UserGroupRoleApi.saveMulti({ insert: params }).then(res => {
            ElNotification({
                message: '添加成功',
                type: 'success',
            })
            RoleUnitUserTableRef.value.loadTable()
        })
    },
    // 保存用户回调函数
    onSaveUser: (data: any) => {
        let params: { roleId: string | undefined; userGroupId: any; userGroupType: any }[] = []
        data.forEach((element: any) => {
            let item = {
                roleId: props.roleId,
                userGroupId: element.userDeptId,
                userGroupType: 1
            }
            params.push(item)
        });
        UserGroupRoleApi.saveMulti({ insert: params }).then(res => {
            ElNotification({
                message: '添加成功',
                type: 'success',
            })
            RoleUnitUserState.userDialogVisible = false
            RoleUnitUserTableRef.value.loadTable()
        })
    }
    ////// 弹窗 end ////////
})

onMounted(() => {
    RoleUnitUserTableRef.value.loadTable()
})

defineExpose({
    getRoleUnitUserTableRef: () => RoleUnitUserTableRef.value
})

</script>
<template>
    <div>
        <jxtech-page-table
            ref="RoleUnitUserTableRef"
            row-key="userGroupRoleId"
            :table-column="RoleUnitUserState.tableColumn"
            :load-data="RoleUnitUserState.loadData"
            :exp-data="RoleUnitUserState.expData"
            :table-height="480"
            @selection-change="RoleUnitUserState.tableSelectionChange"
        >
            <template #header>
                <div class="jxtech-page-table-header-flex">
                    <div class="jxtech-page-table-header-flex-left">
                        <span class="jxtech-page-table-header-flex-title">角色用户部门管理</span>
                    </div>
                    <div class="jxtech-page-table-header-flex-right">
                        <el-button type="primary" @click="RoleUnitUserState.onAddUnitButtonClick">
                            <jxtech-svg-icon icon="#icon-jia" color="#fff"></jxtech-svg-icon>
                            <span style="color:#fff;">&nbsp;添加部门</span>
                        </el-button>
                        <el-button type="primary" @click="RoleUnitUserState.onAddUserButtonClick">
                            <jxtech-svg-icon icon="#icon-jia" color="#fff"></jxtech-svg-icon>
                            <span style="color:#fff;">&nbsp;添加用户</span>
                        </el-button>
                        <jxtech-delete-button
                            :disabled="RoleUnitUserState.selectionData.length == 0"
                            @click="RoleUnitUserState.deleteTableData"
                        ></jxtech-delete-button>
                    </div>
                </div>
            </template>
            <template #customValid="{ row }">
                <el-tag v-if="row.valid === '有效'" type="success" size="small">是</el-tag>
                <el-tag v-else type="danger" size="small">否</el-tag>
                <!-- <el-checkbox v-model="row.valid" true-label="有效" false-label="无效" disabled></el-checkbox> -->
            </template>
        </jxtech-page-table>
        <unit-tree-dialog
            :visible="RoleUnitUserState.unitDialogVisible"
            :show-checkbox="true"
            @update:visible="RoleUnitUserState.updateUnitDialogVisible"
            @change-unit="RoleUnitUserState.onSaveUnit"
        ></unit-tree-dialog>
        <user-select-dialog
            :visible="RoleUnitUserState.userDialogVisible"
            @update:visible="RoleUnitUserState.updateUserDialogVisible"
            @ok="RoleUnitUserState.onSaveUser"
        ></user-select-dialog>
    </div>
</template>
<style>
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: var(--el-checkbox-checked-bg-color);
    border-color: var(--el-checkbox-checked-input-border-color);
}
</style>